import React,{Component} from 'react'
import {View,FlatList,Text,StyleSheet,RefreshControl,ActivityIndicator,SwipeableFlatList,TouchableHighlight} from 'react-native'
//import { ActivityIndicator } from '@ant-design/react-native';
class List extends Component{
    constructor(props){
        super(props);
        this.state ={
            data:['北京','上海','广州','深圳','南京','南通'],
            isloading:false
        }
    }
    loadData(is){
        if(is){
            this.setState({
                isloading:true
            })
        }
      
        setTimeout(()=>{
            var city_name = ['北京','上海','广州','深圳','南京','南通'];
            let dataArr = [];
            if(is){
                for(let i = this.state.data.length-1;i>=0;i--){
                    dataArr.push(this.state.data[i]);
                }
            }else{
                dataArr = this.state.data.concat(city_name);
            }
        
        this.setState({
            isloading:false,
            data:dataArr,
        })
        },1000);
        
    }
    getQuickActions(){
        return(
             <View style={styles.quickAContent}>
                        <TouchableHighlight
                            onPress={()=>alert("确认删除？")}
                        >
                            <View style={styles.quick}>
                                <Text style={styles.delete}>删除</Text>
                            </View>
                        </TouchableHighlight>
                  </View>
        )
    }
    getFootList(){
        return(
        <View style={{flex:1,alignItems:'center'}}>
                            <ActivityIndicator style={{flex:1,justifyContent:'center'}}
                                size={'large'}
                                animating={true}
                            />
                            <Text style={{flex:1,justifyContent:'center'}}>正在加载更多</Text>
                        </View>)
    }
    render(){
        return(
            <View style={styles.container}>
                {/* <FlatList
                    data={this.state.data}
                    renderItem={({item}) =><View style={styles.item}><Text style={styles.text}>{item}</Text></View>}
                    // 这是默认的加载样式
                    // refreshing={this.state.isloading}
                    // onRefresh={()=>{this.loadData()}}
                    //自定义的loading
                    refreshControl = {
                        <RefreshControl
                            title={'Loading'}
                            refreshing={this.state.isloading}
                            onRefresh={()=>{this.loadData(true)}}
                        />
                    }
                    // 底部加载
                    ListFooterComponent={<View style={{flex:1,alignItems:'center'}}>
                        <ActivityIndicator style={{flex:1,justifyContent:'center'}}
                            size={'large'}
                            animating={true}
                        />
                        <Text style={{flex:1,justifyContent:'center'}}>正在加载更多</Text>
                    </View>}
                    onEndReached={()=>{this.loadData(false)}}
                    /> */}
                    <SwipeableFlatList
                    data={this.state.data}
                    renderItem={(data) =><View style={styles.item}><Text style={styles.text}>{data.item}</Text></View>}

                    // 这是默认的加载样式
                    // refreshing={this.state.isloading}
                    // onRefresh={()=>{this.loadData()}}
                    //自定义的loading
                        refreshControl = {
                            <RefreshControl
                                title={'Loading'}
                                refreshing={this.state.isloading}
                                onRefresh={()=>{this.loadData(true)}}
                            />
                        }
                    // 底部加载
                        ListFooterComponent={()=>this.getFootList()}
                        onEndReached={()=>{this.loadData(false)}}
                    renderQuickActions={()=>this.getQuickActions()}
                    maxSwipeDistance={80}
                    />
            </View>
        )
    }
}
const styles = StyleSheet.create({
    container: {
        flex: 1,
    },
    item: {
        backgroundColor: '#aeffb1',
        height: 100,
        marginRight: 15,
        marginLeft: 15,
        marginBottom: 10,
        alignItems: 'center',
        justifyContent: 'center',
        elevation:5,//漂浮的效果
        borderRadius:5,//圆角
    },
    text: {
        color: '#444444',
        fontSize: 20,
    },
    quickContainer:{
        flex:1,
        justifyContent:'flex-end'
    },
    quickAContent:{
        flex:1,
        flexDirection:'row',
        justifyContent:'flex-end',
        marginRight:15,
        marginBottom:10,
    },
    quick:{
        backgroundColor:"#ff1d49",
        flex:1,
        alignItems:'flex-end',//水平靠右
        justifyContent:'center',//上下居中
        width:100,
        borderRadius:5,
        elevation:5,//漂浮的效果

    },
    delete:{
        color:"#d8fffa",
        marginRight:30
    }
})
export default List;